<template>
  <div v-loading="loading" style="padding: 10px;">
    <!-- <el-card>
      <el-card class="about">{{ $t('关于我们') }}</el-card>
      <el-card class="text">
        <div>{{ $t('text1') }}</div>
        <div>
          {{ $t('text2') }}
        </div>
      </el-card>
    </el-card> -->
    <el-card style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('总用户数量')">
              <template slot="formatter">{{ formData.totalUserCount || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('今日新增用户数量')">
              <template slot="formatter">{{ formData.todayNewUserCount || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('有效用户数量(购买过流量包的用户)')">
              <template slot="formatter">{{ formData.validUserCount || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('月增新用户')">
              <template slot="formatter">{{ formData.monthlyNewUserCount || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic :title="`${$t('平台总购买流量')}/G`">
              <template slot="formatter">{{ formData.totalPurchasedFlowGB || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('购买初级流量包')">
              <template slot="formatter">{{ formData.totalFlowPackages.packageType1 || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('购买中级流量包')">
              <template slot="formatter">{{ formData.totalFlowPackages.packageType2 || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('购买高级流量包')">
              <template slot="formatter">{{ formData.totalFlowPackages.packageType3 || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-statistic :title="$t('平台总CFP')">
              <template slot="formatter">{{ formData.totalCFP || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic :title="$t('购买流量包支出CFP')">
              <template slot="formatter">{{ formData.flowPackageExpenditureCFP || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic :title="$t('流量包总产出CFP')">
              <template slot="formatter">{{ formData.flowPackageIncomeCFP || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('今日流量包产出CFP')">
              <template slot="formatter">{{ formData.todayFlowPackageIncomeCFP || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('分享产出CFP')">
              <template slot="formatter">{{ formData.todayShareCfp || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('解锁产出CFP')">
              <template slot="formatter">{{ formData.todayUnlockedCfp || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic :title="$t('团队奖励产出CFP')">
              <template slot="formatter">{{ formData.todayTeamRewardCfp || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-row :gutter="20">
        <el-col :span="8">
          <div>
            <el-statistic :title="$t('今日购买流量包支出CFP')">
              <template slot="formatter">{{ formData.todayFlowPackageExpenditureCFP || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic :title="`${$t('今日购买流量')}/G`">
              <template slot="formatter">{{ formData.todayPurchasedFlowGB || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="8">
          <div>
            <el-statistic :title="`${$t('今日解锁流量')}/G`">
              <template slot="formatter">{{ formData.todayUnlockedFlowGB || 0 }}</template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { getHomeDataApi } from "@/api/home.js";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        totalFlowPackages: {},
      },
      loading: false,
    };
  },
  computed: {},
  watch: {},
  mounted() { },
  created() {
    this.getHomeData();
  },
  methods: {
    async getHomeData() {
      this.loading = true;
      const res = await getHomeDataApi();
      console.log(res);
      this.formData = res;
      this.loading = false;
    },
  },
};
</script>
<style lang='scss' scoped>
.about {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 30px;
}

.text {
  font-size: 17px;
  margin-top: 10px;
}

.userdiv {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
